<template>
  <el-upload
    :on-change="handleChange"
    :auto-upload="false"
    :show-file-list="false"
  >
    <div slot="trigger" class="user-head pointer">
      <img :src="url" v-if="url" />
      <img src="@/assets/img/head2.png" v-else="url" />
      <div class="user-head_upload" v-if="!url">上传</div>
    </div>
  </el-upload>
</template>
<script setup>
import { ref, getCurrentInstance, computed, onMounted } from "vue";
import { Plus, Close } from "@element-plus/icons-vue";
const { proxy } = getCurrentInstance();
import { useTrigger } from "@/hooks/useValidatorRules.js";
const emits = defineEmits(["update:modelValue"]);
const { emitTrigger } = useTrigger();
const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
});
const url = computed({
  get: () => {
    return props.modelValue;
  },
  set: (file) => {
    emits("update:modelValue", file);
    emitTrigger();
  },
});

const handleFileDel = () => {
  url.value = "";
};
const handleChange = (file) => {
  const formData = new FormData();
  formData.append("uploadFile", file.raw);
  proxy.$post({ url: "/upload", data: formData }).then((res) => {
    url.value = res.url;
  });
};
</script>
<style lang="less" scoped>
.user-head {
  width: 80px;
  height: 80px;
  border: 1px dashed rgba(0, 0, 0, 0.17);
  margin-right: 24px;
  position: relative;

  .user-head_upload {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 40px;
    color: #fff;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>